<template>
  <div>
    <el-row>
      <el-col :span="24">
        <vxe-grid
            border
            resizable
            export-config
            import-config
            keep-source
            style="height: calc(100vh - 160px)"
            height="auto"
            tableId="data-table"
            ref="xGrid"
            id="toolbar_demo_1"
            :loading="tableLoading"
            :toolbar="tableToolbar"
            :pager-config="pagerConfig"
            :data="tableData"
            @page-change="pageChangeChange">
          <!-- 工具栏按钮插槽 -->
          <template slot="buttons">
            <div style="float: right;margin-right: 12px;">
              <el-button icon="el-icon-circle-plus" size="medium" circle title="新建用例"
                         @click="create"></el-button>
            </div>
          </template>
          <vxe-table-column title="计划编号" align="center" width="300">
            <template v-slot="{ row }">
              <span>{{row.Id}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="计划名称" align="center">
            <template v-slot="{ row }">
              <a @click.prevent="editDetil(row)" class="link-name"><span>{{row.Name}}</span></a>
            </template>
          </vxe-table-column>
          <vxe-table-column title="状态" align="center" width="100">
            <template v-slot="{ row }">
              <span>{{row.Status}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="负责人" align="center" width="100">
            <template v-slot="{ row }">
              <span>{{row.Acceptname}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="预计开始时间" align="center" width="120">
            <template v-slot="{ row }">
              <span>{{row.Acceptname}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="预计结束时间" align="center" width="120">
            <template v-slot="{ row }">
              <span>{{row.Degree}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="实际开始时间" align="center" width="120">
            <template v-slot="{ row }">
              <span>{{row.Type}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="实际结束时间" align="center" width="120">
            <template v-slot="{ row }">
              <span>{{row.Type}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" align="center" width="160">
            <template v-slot="{ row }">
              <el-dropdown class="operate" @command="handleOperateCommand($event, row)">
                <span class="txt">操作<i class="iconfont iconzhankai2"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="-1" style="padding: 2px 30px">开始</el-dropdown-item>
                  <el-dropdown-item :command="0" style="padding: 2px 30px">编辑</el-dropdown-item>
                  <el-dropdown-item :command="1" style="padding: 2px 30px">删除</el-dropdown-item>
                  <el-dropdown-item :command="2" style="padding: 2px 30px">暂停</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </vxe-table-column>
        </vxe-grid>
      </el-col>
    </el-row>
    <test-pack-add :visible.sync="editVisible" :form="caseForm" @suClose="suClose"></test-pack-add>
  </div>
</template>

<script>
import testCasePackApi from "@/api/testCasePackApi";
import testPackAdd from "@/page/ProjectManage/modules/testcase/testPackAdd";

export default {
  name: "testPack",
  components: {
    testPackAdd
  },
  data () {
    return {
      caseForm: {},
      editVisible: false,
      tableData: [
        {
          UserrealName: 'dadasdasas'
        }
      ],
      tableToolbar: {
        refresh: {query: this.getDataList},
      },
      pagerConfig: {
        currentPage: 1,
        pageSize: 15,
        total: 0,
        pagerCount: 7,
        pageSizes: [10,15,20,50,100]
      },
      tableLoading: false,
      queryParas: {
        p: 1,
        pageoffset: 15,
        id: this.$route.params.id
      }
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    editDetil (row) {
      // this.editData = JSON.parse(JSON.stringify(row))
      // this.editVisible = true
      console.log(`view/project/packTestCase/${row.Id}`)
      this.$router.push(`/view/project/packTestCase/${row.Id}`)
      // this.$emit('checkCase')
    },
    handleOperateCommand ($event, row) {
      console.log($event, row)
    },
    selected (index, indexPath) {
      console.log(index, indexPath)
    },
    getDataList () {
      this.tableLoading = true
      testCasePackApi.getPageCase(this.queryParas).then(res => {
        if (res && res.Modules) {
          const { Modules, Total } = res
          this.tableData = Modules;
          this.pagerConfig.total = Total
        } else {
          this.tableData = []
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    pageChangeChange () {
    },
    create () {
      this.caseForm = {
        Projectid: this.$route.params.id
      }
      this.editVisible = true
    },
    edit (row) {
      this.caseForm = row
      this.editVisible = true
    },
    suClose () {
      this.getDataList()
    }
  }
}
</script>

<style scoped lang="scss">
.link-name {
  color: #65CEA7;
}

.link-name:hover {
  color: #353F4F;
  cursor: pointer;
}
</style>